<template>
  <div class="module-card">
    <div class="module-header">
      <h3>主持人才库</h3>
      <button @click="showAddDialog = true" class="btn-primary" :disabled="isLoading">添加人才</button>
    </div>

    <!-- 搜索区域 -->
    <div class="search-section">
      <div class="search-group">
        <div class="search-input-container">
          <input 
            v-model="searchForm.keyword"
            placeholder="请输入姓名或主持方向进行模糊搜索"
            class="search-input"
            @keyup.enter="handleSearch"
            @focus="onSearchFocus"
            @blur="onSearchBlur"
            :disabled="isLoading"
          >
          <div v-if="searchForm.keyword" class="search-clear" @click="clearSearch">×</div>
        </div>
        <button @click="handleSearch" class="btn-search" :disabled="isLoading">
          <span class="search-icon">🔍</span> 搜索
        </button>
        <button @click="resetSearch" class="btn-reset" :disabled="isLoading">重置</button>
      </div>
      <div v-if="searchStatus" class="search-status">
        {{ searchStatus }}
      </div>
    </div>

    <!-- 主持人才列表 -->
    <table class="data-table">
      <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>身高(米)</th>
          <th>体重(公斤)</th>
          <th>年级</th>
          <th>主持方向</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="isLoading" class="loading-state">
          <td colspan="7">
            <span class="loading-spinner"></span>
            正在加载中...
          </td>
        </tr>
        <tr v-else-if="talentList.length === 0" class="no-data">
          <td colspan="7">
            <div class="no-data-icon">📋</div>
            <div class="no-data-text">暂无人才库数据</div>
            <div class="no-data-hint">点击"添加人才"开始创建您的主持人才库</div>
          </td>
        </tr>
        <tr v-else v-for="(talent, index) in talentList" :key="talent.talentId" class="table-row">
          <td>{{ index + 1 }}</td>
          <td class="member-name">{{ getMemberName(talent.userId) }}</td>
          <td>{{ talent.height }}</td>
          <td>{{ talent.weight }}</td>
          <td>{{ talent.grade }}</td>
          <td class="host-direction">{{ talent.hostDirection }}</td>
          <td class="operation-buttons">
            <button @click="editTalent(talent)" class="btn-edit" :disabled="isLoading">
              <span class="button-icon">✏️</span> 编辑
            </button>
            <button @click="deleteTalent(talent.talentId)" class="btn-delete" :disabled="isLoading">
              <span class="button-icon">🗑️</span> 删除
            </button>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 添加/编辑弹窗 -->
    <div v-if="showAddDialog || showEditDialog" class="dialog-overlay" @click="closeDialog">
      <div class="dialog" @click.stop>
          <div class="dialog-header">
            <h4 class="dialog-title">{{ showAddDialog ? '添加主持人才' : '编辑主持人才' }}</h4>
            <button @click="closeDialog" class="dialog-close">×</button>
          </div>
        <div class="dialog-body" style="max-width: 700px; margin: 0 auto;">
          <form @submit.prevent="saveTalent">
            <!-- 姓名字段单独一行 -->
            <div class="form-group" style="margin-bottom: 24px;">
                <label style="display: block; margin-bottom: 8px; font-weight: 600; font-size: 14px; color: #333;">姓名：</label>
                <select v-model="talentForm.userId" required style="width: 100%; padding: 12px 16px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px;">
                  <option value="">请选择台内成员</option>
                  <option v-for="member in allMembers" :key="member.id" :value="member.id">
                    {{ member.username }}
                  </option>
                </select>
              </div>
              
            <!-- 两列布局的表单字段 -->
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px;">
              <div class="form-group">
                <label style="display: block; margin-bottom: 8px; font-weight: 600; font-size: 14px; color: #333;">身高(米)：</label>
                <input 
                  type="number" 
                  v-model.number="talentForm.height" 
                  step="0.01"
                  min="1"
                  max="3"
                  required
                  style="width: 100%; padding: 12px 16px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px;"
                >
              </div>
              <div class="form-group">
                <label style="display: block; margin-bottom: 8px; font-weight: 600; font-size: 14px; color: #333;">体重(公斤)：</label>
                <input 
                  type="number" 
                  v-model.number="talentForm.weight" 
                  step="0.1"
                  min="30"
                  max="200"
                  required
                  style="width: 100%; padding: 12px 16px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px;"
                >
              </div>
              <div class="form-group">
                <label style="display: block; margin-bottom: 8px; font-weight: 600; font-size: 14px; color: #333;">年级：</label>
                <input 
                  type="text" 
                  v-model="talentForm.grade" 
                  required
                  style="width: 100%; padding: 12px 16px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px;"
                >
              </div>
              <div class="form-group">
                <label style="display: block; margin-bottom: 8px; font-weight: 600; font-size: 14px; color: #333;">主持方向：</label>
                <input 
                  type="text" 
                  v-model="talentForm.hostDirection" 
                  required
                  style="width: 100%; padding: 12px 16px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px;"
                >
              </div>
            </div>
            
            <div class="form-actions" style="display: flex; justify-content: flex-end; gap: 16px; margin-top: 32px;">
                <button type="button" @click="closeDialog" class="btn-secondary" style="padding: 12px 24px; font-size: 16px;">取消</button>
                <button type="submit" class="btn-primary" style="padding: 12px 32px; font-size: 16px;">保存</button>
              </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'

// 状态管理
const talentList = ref([])
const allMembers = ref([])
const searchForm = ref({ keyword: '' })
const showAddDialog = ref(false)
const showEditDialog = ref(false)
const editingTalentId = ref(null)

// UI状态管理
const isLoading = ref(false)
const searchStatus = ref('')

// 人才表单数据
const talentForm = ref({
  userId: '',
  height: '',
  weight: '',
  grade: '',
  hostDirection: ''
})

// 成员姓名映射表（用于快速查找）
const memberNameMap = computed(() => {
  const map = {}
  allMembers.value.forEach(member => {
    // 存储字符串和数字两种类型的键，确保兼容性
    map[member.id] = member.username
    if (typeof member.id !== 'string') {
      map[String(member.id)] = member.username
    }
  })
  return map
})

// 获取成员姓名
const getMemberName = (userId) => {
  // 尝试直接获取，如果不存在则尝试转换类型后获取
  return memberNameMap.value[userId] || 
         memberNameMap.value[String(userId)] || 
         '未知成员'
}

// 获取主持人才库数据
const fetchTalentPool = async () => {
  isLoading.value = true
  try {
    let url = ''
    const keyword = searchForm.value.keyword.trim().toLowerCase()
    
    if (keyword) {
      // 尝试先获取所有数据，然后在前端进行全面的模糊搜索
      // 这种方式可以确保搜索结果更准确，不受后端API限制
      url = 'http://localhost:8080/hostTalent/all'
    } else {
      url = 'http://localhost:8080/hostTalent/all'
    }
    
    const response = await fetch(url)
    const result = await response.json()
    
    if (result.code === 200) {
      let filteredData = result.data || []
      
      // 在前端执行全面的模糊搜索
      if (keyword) {
        filteredData = filteredData.filter(talent => {
          const memberName = getMemberName(talent.userId).toLowerCase()
          const hostDirection = (talent.hostDirection || '').toLowerCase()
          const grade = (talent.grade || '').toLowerCase()
          
          // 支持姓名、主持方向、年级的模糊搜索
          return memberName.includes(keyword) || 
                 hostDirection.includes(keyword) ||
                 grade.includes(keyword)
        })
        
        searchStatus.value = `找到 ${filteredData.length} 条相关结果`
        setTimeout(() => { searchStatus.value = '' }, 3000)
      } else {
        searchStatus.value = ''
      }
      
      talentList.value = filteredData
    } else {
      console.error('获取主持人才库失败:', result.message)
      searchStatus.value = '搜索失败，请重试'
      setTimeout(() => { searchStatus.value = '' }, 2000)
    }
  } catch (error) {
    console.error('获取主持人才库失败:', error)
    searchStatus.value = '网络错误，请检查服务器连接'
    setTimeout(() => { searchStatus.value = '' }, 2000)
  } finally {
    isLoading.value = false
  }
}

// 获取台内所有成员列表
const fetchAllMembers = async () => {
  try {
    const response = await fetch('http://localhost:8080/user/all') // 获取所有台内成员
    const result = await response.json()
    
    if (result.code === 200) {
      allMembers.value = result.data || []
    } else {
      console.error('获取台内成员失败:', result.message)
      alert('获取成员数据失败，请重试')
    }
  } catch (error) {
    console.error('获取台内成员失败:', error)
    alert('网络错误，请检查服务器连接')
  }
}

// 清除搜索内容
const clearSearch = () => {
  searchForm.value.keyword = ''
  searchStatus.value = ''
}

// 搜索框交互处理
const onSearchFocus = () => {
  // 可以在这里添加搜索提示或其他视觉效果
  if (!searchForm.value.keyword && !searchStatus.value) {
    searchStatus.value = '支持姓名、主持方向、年级的模糊搜索'
    setTimeout(() => {
      if (!searchForm.value.keyword) {
        searchStatus.value = ''
      }
    }, 3000)
  }
}

const onSearchBlur = () => {
  // 失焦时可以清除临时提示
  if (searchStatus.value === '支持姓名、主持方向、年级的模糊搜索') {
    searchStatus.value = ''
  }
}

// 搜索功能
const handleSearch = () => {
  if (!searchForm.value.keyword.trim()) {
    searchStatus.value = '请输入搜索关键词'
    setTimeout(() => { searchStatus.value = '' }, 2000)
    return
  }
  
  searchStatus.value = '正在搜索中...'
  fetchTalentPool()
}

// 重置搜索
const resetSearch = () => {
  searchForm.value.keyword = ''
  fetchTalentPool()
}

// 添加人才
const addTalent = () => {
  talentForm.value = {
    userId: '',
    height: '',
    weight: '',
    grade: '',
    hostDirection: ''
  }
  showAddDialog.value = true
  showEditDialog.value = false
}

// 编辑人才
const editTalent = (talent) => {
  talentForm.value = {
    userId: talent.userId,
    height: talent.height,
    weight: talent.weight,
    grade: talent.grade,
    hostDirection: talent.hostDirection
  }
  editingTalentId.value = talent.talentId
  showEditDialog.value = true
  showAddDialog.value = false
}

// 保存人才信息
const saveTalent = async () => {
  try {
    // 表单验证
    if (!talentForm.value.userId) {
      alert('请选择成员')
      return
    }
    
    if (!talentForm.value.height || talentForm.value.height <= 0) {
      alert('请输入有效的身高')
      return
    }
    
    if (!talentForm.value.weight || talentForm.value.weight <= 0) {
      alert('请输入有效的体重')
      return
    }
    
    if (!talentForm.value.grade) {
      alert('请输入年级')
      return
    }
    
    if (!talentForm.value.hostDirection) {
      alert('请输入主持方向')
      return
    }
    
    let url = ''
    let method = ''
    
    if (showAddDialog.value) {
      // 添加操作
      url = 'http://localhost:8080/hostTalent/add'
      method = 'POST'
    } else {
      // 编辑操作
      url = 'http://localhost:8080/hostTalent/update'
      method = 'PUT'
    }
    
    const requestData = {
      ...talentForm.value,
      talentId: editingTalentId.value // 编辑时需要包含ID
    }
    
    const response = await fetch(url, {
      method: method,
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(requestData)
    })
    
    const result = await response.json()
    
    if (result.code === 200) {
      closeDialog()
      fetchTalentPool()
      alert(showAddDialog.value ? '添加成功' : '编辑成功')
    } else {
      console.error('保存失败:', result.message)
      alert('保存失败，请重试')
    }
  } catch (error) {
    console.error('保存失败:', error)
    alert('网络错误，请检查服务器连接')
  }
}

// 删除人才
const deleteTalent = async (talentId) => {
  if (confirm('确定要删除该主持人才吗？')) {
    try {
      const response = await fetch(`http://localhost:8080/hostTalent/${talentId}`, {
        method: 'DELETE'
      })
      
      const result = await response.json()
      
      if (result.code === 200) {
        fetchTalentPool()
        alert('删除成功')
      } else {
        console.error('删除失败:', result.message)
        alert('删除失败，请重试')
      }
    } catch (error) {
      console.error('删除失败:', error)
      alert('网络错误，请检查服务器连接')
    }
  }
}

// 关闭弹窗
const closeDialog = () => {
  showAddDialog.value = false
  showEditDialog.value = false
  editingTalentId.value = null
  talentForm.value = {
    userId: '',
    height: '',
    weight: '',
    grade: '',
    hostDirection: ''
  }
}

// 页面加载时初始化数据
onMounted(() => {
  fetchTalentPool()
  fetchAllMembers()
})
</script>

<style scoped>
/* 模块容器 */
.module-container {
  padding: 32px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.module-container::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(64, 150, 255, 0.05) 0%, rgba(64, 150, 255, 0) 70%);
  transform: rotate(30deg);
  z-index: 0;
}

.module-content {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
}

/* 全局模块容器样式 */
.module-card {
  width: 100%;
  max-width: 1200px;
  margin: 24px auto;
  padding: 24px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.module-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.module-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #4096ff, #69b1ff);
}

/* 模块头部 */
.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f0f0;
  position: relative;
}

.module-header::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, #4096ff, #69b1ff);
}

.module-header h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  letter-spacing: 0.5px;
}

/* 搜索区域 */
.search-section {
  margin-bottom: 32px;
  background: #f8f9fa;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #e9ecef;
  transition: border-color 0.3s ease;
}

.search-section:focus-within {
  border-color: #4096ff;
}

.search-group {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.search-input-container {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.search-input {
  flex: 1;
  padding: 12px 40px 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 25px;
  font-size: 15px;
  transition: all 0.3s ease;
  background: white;
}

.search-input:focus {
  outline: none;
  border-color: #4096ff;
  box-shadow: 0 0 0 3px rgba(64, 150, 255, 0.1);
  transform: translateY(-1px);
}

.search-clear {
  position: absolute;
  right: 12px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e0e0e0;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: all 0.2s ease;
}

.search-clear:hover {
  background: #ff4d4f;
  color: white;
  transform: scale(1.1);
}

.search-status {
  padding: 8px 16px;
  background: #e6f7ff;
  border: 1px solid #91d5ff;
  border-radius: 6px;
  font-size: 14px;
  color: #1890ff;
  text-align: center;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 数据表格 */
.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.data-table thead {
  background: linear-gradient(90deg, #f8f9fa, #e9ecef);
}

.data-table th,
.data-table td {
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.2s ease;
}

.data-table th {
  font-weight: 600;
  color: #495057;
  font-size: 15px;
  letter-spacing: 0.3px;
  position: relative;
  user-select: none;
}

.data-table th:hover {
  background: rgba(64, 150, 255, 0.05);
}

.table-row {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.table-row:hover {
  background: #f8f9ff;
  transform: translateX(2px);
}

.table-row:hover td {
  color: #4096ff;
}

.member-name {
  font-weight: 500;
  color: #2c3e50;
}

.host-direction {
  color: #6c757d;
  font-style: italic;
}

.loading-state {
  text-align: center;
  padding: 60px !important;
  color: #6c757d;
  font-size: 16px;
}

.loading-spinner {
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #4096ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 12px;
  vertical-align: middle;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.no-data {
  text-align: center;
  padding: 80px !important;
  color: #999;
}

.no-data-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.no-data-text {
  font-size: 18px;
  margin-bottom: 8px;
  color: #6c757d;
}

.no-data-hint {
  font-size: 14px;
  color: #adb5bd;
}

/* 操作按钮 */
.operation-buttons {
  display: flex;
  gap: 12px;
  margin-bottom: 0;
}

.btn {
  padding: 10px 20px;
  border-radius: 25px;
  border: 2px solid transparent;
  background: #f5f5f5;
  color: #666;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 150, 255, 0.15);
  color: #4096ff;
  border-color: #4096ff;
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background: linear-gradient(135deg, #4096ff, #69b1ff);
  color: white;
  border-color: #4096ff;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #69b1ff, #8cc5ff);
  color: white;
  border-color: #69b1ff;
  box-shadow: 0 4px 15px rgba(64, 150, 255, 0.25);
}

.btn-secondary {
  background: linear-gradient(135deg, #f5f5f5, #e9e9e9);
  color: #333;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-secondary:hover {
  background: linear-gradient(135deg, #e9e9e9, #dcdcdc);
  color: #333;
  border-color: #dcdcdc;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-edit {
  background: linear-gradient(135deg, #ffaa33, #ffbb55);
  color: white;
  padding: 4px 12px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-edit:hover {
  background: linear-gradient(135deg, #ffbb55, #ffcc77);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(255, 170, 51, 0.2);
}

.btn-delete {
  background: linear-gradient(135deg, #ff4d4f, #ff6b6b);
  color: white;
  padding: 4px 12px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-delete:hover {
  background: linear-gradient(135deg, #ff6b6b, #ff8989);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(255, 77, 79, 0.2);
}

.btn-search {
  background: linear-gradient(135deg, #4096ff, #59a2ff);
  color: white;
  padding: 4px 12px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-search:hover {
  background: linear-gradient(135deg, #59a2ff, #72aeff);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(64, 150, 255, 0.2);
}

.btn-reset {
  background: linear-gradient(135deg, #f5f5f5, #e9e9e9);
  color: #666;
  border: 1px solid #dcdcdc;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-reset:hover {
  background: linear-gradient(135deg, #e9e9e9, #dcdcdc);
  color: #666;
}

/* 弹窗样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog-content {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.dialog-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.dialog-close {
  background: none;
  border: none;
  font-size: 20px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog-close:hover {
  color: #333;
}

.dialog-body {
  padding: 20px;
}

/* 表单样式 */
.form-group {
  margin-bottom: 16px;
}

.form-group label {
  font-weight: 600;
  color: #495057;
  font-size: 14px;
  margin-bottom: 6px;
  display: block;
  letter-spacing: 0.3px;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  font-size: 14px;
  box-sizing: border-box;
  transition: all 0.3s ease;
  background: white;
  appearance: none;
  position: relative;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #4096ff;
  box-shadow: 0 0 0 3px rgba(64, 150, 255, 0.1);
  transform: translateY(-1px);
}

.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 48px;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 2px solid #f0f0f0;
}

.form-actions .btn {
  padding: 12px 32px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  min-width: 120px;
  letter-spacing: 0.5px;
}

.form-actions .btn-primary {
  background: linear-gradient(135deg, #4096ff, #69b1ff);
  color: white;
  border-color: #4096ff;
}

.form-actions .btn-primary:hover {
  background: linear-gradient(135deg, #69b1ff, #8cc5ff);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(64, 150, 255, 0.3);
}

.form-actions .btn-secondary {
  background: linear-gradient(135deg, #f5f5f5, #e9e9e9);
  color: #666;
  border-color: #dcdcdc;
}

.form-actions .btn-secondary:hover {
  background: linear-gradient(135deg, #e9e9e9, #dcdcdc);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .module-card {
    padding: 16px;
    margin: 8px;
  }
  
  .search-group {
    flex-direction: column;
  }
  
  .operation-buttons {
    flex-direction: column;
  }
  
  .data-table {
    font-size: 12px;
  }
  
  .data-table th,
  .data-table td {
    padding: 8px;
  }
  
  .dialog-content {
    width: 95%;
    margin: 20px;
  }
}
</style>